<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>麦克斯博客-管理端</title>
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/assets/layui/css/layui.css"/>
    <style>
        * {
            font-family: Consolas, "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;;
        }

        .layui-layout-body {
            background-image: url("/assets/common/img/bg.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .login-main {
            width: 375px;
            margin: 250px auto auto auto;
            background: #fff;
            border-radius: 10px;
        }

        .login-box {
            padding: 20px
        }

        .login-header h2 {
            font-size: 30px;
            text-align: center
        }

        .login-icon {
            position: absolute;
            width: 38px;
            line-height: 38px;
            text-align: center;
            color: #d2d2d2
        }

        .login-body .layui-form-item .layui-input {
            padding-left: 38px
        }

        .layui-form-checkbox[lay-skin=primary] span {
            height: auto;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="login-main">
    <div class="login-box login-header">
        <h2>麦克斯博客 - 管理端</h2>
    </div>
    <div style="text-align: center" th:if="${param.error != null}">登录失败！<span th:if="${session.SPRING_SECURITY_LAST_EXCEPTION != null}"><br/>原因：<span style="color: red" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}">未知</span></span></div>
    <div style="text-align: center" th:if="${param.logout != null}">您已注销登录。</div>
    <form id="login-form" method="post" action="/_admin/login" class="login-box login-body layui-form">
        <div class="layui-form-item">
            <label class="login-icon layui-icon layui-icon-username"></label>
            <input type="text" name="username" lay-verify="required" placeholder="用户名" class="layui-input" value="admin">
        </div>
        <div class="layui-form-item">
            <label class="login-icon layui-icon layui-icon-password"></label>
            <input id="password" type="password" name="password" lay-verify="required" placeholder="密码" class="layui-input">
        </div>
        <div class="layui-form-item">
            <input type="checkbox" id="remember-me" name="remember-me" title="记住我" checked>
        </div>
        <div class="layui-form-item">
            <button id="login-submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login-submit">L O G I N</button>
        </div>
    </form>
</div>
<script src="/assets/jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/jquery/jquery.cookie-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    let element;
    layui.use(['element'], function () {
        element = layui.element;
    });

    layui.use(['form'], function () {
        let $ = layui.$
            , form = layui.form;

        form.render();
        //提交
        form.on('submit(login-submit)', function (data) {
            let i = layer.msg('正在登录。。。', {
                icon: 16,
                shade: 0.05,
                time: 0
            });
            $('#login-form').submit();
        });
    });

    $('#password').on('keydown', function (event) {
        if (event.keyCode == 13) {
            $("#login-submit").trigger("click");
            return false
        }
    });
</script>
</body>
</html>
